<!-- 供热数据总览 -->

<script>
import Api from "@/api";
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import iconReyuyan from '@/components/LayerTree/images/icon-热源.svg';
import iconGongreguanxian from '@/components/LayerTree/images/icon-供热管线.svg';
import iconGongrefanwei from '@/components/LayerTree/images/icon-供热范围.svg';
import iconHuanrezhan from '@/components/LayerTree/images/icon-换热站.svg';
import iconJianxiujing from '@/components/LayerTree/images/icon-检修井.svg';
import iconFamen from '@/components/LayerTree/images/icon-阀门.svg';
import iconCompany from '@/components/LayerTree/images/icon-企业.svg';
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard
  },
  setup() {
  },
  data() {
    return {
      isLoading: false,
      iconCompany: iconCompany,
      iconReyuyan: iconReyuyan,
      iconGongreguanxian: iconGongreguanxian,
      iconGongrefanwei: iconGongrefanwei,
      iconHuanrezhan: iconHuanrezhan,
      iconJianxiujing: iconJianxiujing,
      iconFamen: iconFamen,
      data_1: 0,
      data_2: 0,
      data_3: 0,
      data_4: 0,
      data_5: 0,
      data_6: 0,
      data_7: 0,
      data_8: 0,
      data_9: 0,
      data_10: 0,
      // 列表的数据
      listData: [],
      activeIndex: 0,
      numberCounter: '',
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
      // 单独请求一次供热站
      this.doSearchEnterprise({ ids: [] })
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeUnmount() {
    // this.$MITT_BUS.emit('rerender-highlight-layer', {
    //   data: null,
    //   type: 'enterprise'
    // })
    this.doReset();
  },
  methods: {
    init() {
      // 获取供热站的数据
      Api.getDataOfGRZ({
        ids: [],
        fields: ['SMID', 'DWMC']
      }).then(res => {
        const obj = Object.create(null);
        res.features.forEach(v => {
          const pro = v.properties;
          const DWMC = pro.DWMC
          if (!obj[DWMC]) {
            obj[DWMC] = 1;
          } else {
            obj[DWMC]++
          }
        });
        // 统计热源企业
        this.data_1 = Object.keys(obj).length;
        // 统计热源点
        this.data_2 = res.features.length;
        this.numberCounter = `${this.data_1}/${this.data_1}`
      });
      // 获取换热站的数据
      Api.getDataOfHRZ({
        ids: [],
        fields: []
      }).then(res => {
        // 统计换热站
        this.data_3 = res.features.length;
      });
      // 获取供热范围的数据
      Api.getDataOfGRFW({
        ids: [],
        fields: []
      }).then(res => {
        this.data_4 = res.features.length;
      })
    },
    // 查询企业
    doSearchEnterprise({ ids, DWMC, fromEvent, checkAll }) {
      if (!fromEvent) {
        if (DWMC) {
          Api.getDataOfCompany({
            ids: [],
            // 区域名称 换热站名称 换热站编码
            fields: ['SMID', 'NAME', 'SHORTNAME', 'LON', 'LAT', 'ADDRESS'],
            attributeFilter: 'NAME=' + '\'' + DWMC + '\''
          }).then(res => {
            if (!res.features || !res.features.length) { this.isLoading = false; return }
            res.features.forEach(v => {
              const c = turf.center(turf.polygon(v.geometry.coordinates[0]))
              const center = c.geometry.coordinates
              v.properties['CENTER'] = center;
            })
            this.$MITT_BUS.emit('rerender-highlight-layer', {
              data: res,
              type: 'company'
            })
            this.isLoading = false;
          })
        } else {
          this.$MITT_BUS.emit('rerender-highlight-layer', {
            data: null,
            type: 'enterprise'
          })
        }
      } else {
        // this.$MITT_BUS.emit('rerender-highlight-layer', {
        //   data: null,
        //   type: 'company'
        // })
        Api.getDataOfCompany({
          ids: [],
          // 区域名称 换热站名称 换热站编码
          fields: ['SMID', 'NAME', 'SHORTNAME', 'LON', 'LAT', 'ADDRESS'],
          attributeFilter: ''
        }).then(res => {
          if (!res.features || !res.features.length) { this.isLoading = false; return }
          res.features.forEach(v => {
            const c = turf.center(turf.polygon(v.geometry.coordinates[0]))
            const center = c.geometry.coordinates
            v.properties['CENTER'] = center;
          })
          this.$MITT_BUS.emit('rerender-highlight-layer', {
            data: res,
            type: 'company'
          })
          this.isLoading = false;
        })
      }



      if (checkAll) {
        this.$MITT_BUS.emit('reset-hushu-area', {
          dataType: 'all',
          type: 'enterprise'
        })
      }
      let attributeFilter = ''
      if (DWMC) {
        attributeFilter = 'DWMC=' + '\'' + DWMC + '\''
      } else {
        attributeFilter = 'SMID > 0'
      }

      Api.getDataOfGRZ({
        ids: ids,
        // 单位名称
        fields: ['SMID', 'DWMC'],
        attributeFilter: attributeFilter
      }).then(res => {
        this.listData = [];
        const obj = Object.create(null);
        res.features.forEach(v => {
          const pro = v.properties;
          const DWMC = pro.DWMC
          if (!obj[DWMC]) {
            obj[DWMC] = 1;
          } else {
            obj[DWMC]++
          }
        });
        Object.keys(obj).forEach(v => {
          this.listData.push({
            DWMC: v,
            COUNT: obj[v]
          })
        })
        this.listData.sort((a, b) => {
          let v1 = a.COUNT;
          let v2 = b.COUNT;
          if (v1 > v2) {
            return -1
          } else {
            return 0
          }
        })
        if (!checkAll) {
          this.$MITT_BUS.emit('reset-hushu-area', {
            dataType: 'part',
            type: 'enterprise',
            // 返回热源站的主键编码 用于在换热站进行过滤
            data: res.features.map(v => { return v.properties.DWMC })
          })
        }
        this.activeIndex = 0;
        this.numberCounter = `${this.listData.length}/${this.listData.length}`
      })
    },
    // 查询热源
    doSearchHeatSource(e, row) {
      if (!e) {
        // 说明是点击的顶层所有的热源
        this.$MITT_BUS.emit('reset-hushu-area', {
          dataType: 'all',
          type: 'heat-source'
        })
      }
      const DWMC = row.DWMC;
      const GRZZJBM = row.GRZZJBM;
      let attributeFilter = ''
      if (DWMC) {
        attributeFilter = 'DWMC=' + '\'' + DWMC + '\''
      }
      if (GRZZJBM) {
        attributeFilter = 'ZJBM=' + '\'' + GRZZJBM + '\''
      }
      if (!attributeFilter) {
        attributeFilter = 'SMID > 0'
      }
      this.listData = [];
      Api.getDataOfGRZ({
        ids: [],
        // 站点名称 热源主键编码
        fields: ['SMID', 'HRZBM', 'ZDMC', 'ZJBM', 'DWMC', 'RYDZ', 'FZR', 'LXFS', 'HRZ_COUNT'],
        attributeFilter: attributeFilter
      }).then(res => {
        if (!res.features || !res.features.length) { this.isLoading = false; return }
        this.activeIndex = 1;
        res.features.forEach(v => {
          const c = turf.center(turf.polygon(v.geometry.coordinates[0]))
          const center = c.geometry.coordinates
          v.properties['CENTER'] = center;
          this.listData.push(v.properties)
        })
        this.listData.sort((a, b) => {
          let v1 = Number(a.HRZ_COUNT);
          let v2 = Number(b.HRZ_COUNT);
          if (v1 > v2) {
            return -1
          } else {
            return 0
          }
        })
        if (e) {
          this.$MITT_BUS.emit('reset-hushu-area', {
            dataType: 'part',
            type: 'heat-source',
            // 返回热源站的主键编码 用于在换热站进行过滤
            data: res.features.map(v => { return v.properties.ZJBM })
          })
        }
        this.$MITT_BUS.emit('rerender-highlight-layer', {
          data: res,
          type: 'heat-source'
        })
        this.numberCounter = `${res.features.length}/${this.data_2}`
      })
    },
    // 查询换热站
    doSearchHeatChanger(e, row) {
      if (!e) {
        // 说明是点击的顶层换热站
        this.$MITT_BUS.emit('reset-hushu-area', {
          dataType: 'all',
          type: 'heat-huanre'
        })
      }
      const GRZZJBM = row.ZJBM;
      const HRZBM = row.HRZBM;
      let attributeFilter = ''
      if (GRZZJBM) {
        attributeFilter = 'GRZZJBM=' + '\'' + GRZZJBM + '\''
      }
      if (HRZBM) {
        attributeFilter = 'ZJBM=' + '\'' + HRZBM + '\''
      }
      if (!attributeFilter) {
        attributeFilter = 'SMID > 0'
      }
      this.listData = [];
      this.isLoading = true;
      Api.getDataOfHRZ({
        ids: [],
        // // 换热站名称 热源主键编码
        fields: ['SMID', 'HRZMC', 'ZJBM', 'GRZZJBM', 'RYMC', 'ZDMC', 'XQ_COUNT', 'SFZG'],
        attributeFilter: attributeFilter
      }).then(res => {
        if (!res.features || !res.features.length) { this.isLoading = false; return }
        this.activeIndex = 2;
        res.features.forEach(v => {
          v.properties['CENTER'] = v.geometry.coordinates;
          this.listData.push(v.properties)
        })
        this.listData.sort((a, b) => {
          let v1 = Number(a.XQ_COUNT);
          let v2 = Number(b.XQ_COUNT);
          if (v1 > v2) {
            return -1
          } else {
            return 0
          }
        })

        if (e) {
          this.$MITT_BUS.emit('reset-hushu-area', {
            dataType: 'part',
            type: 'heat-huanre',
            // 数据
            data: res.features.map(v => { return v.properties.ZJBM })
          })
        }

        this.$MITT_BUS.emit('rerender-highlight-layer', {
          data: res,
          type: 'heat-huanre',
          dataType: 'part'
        })
        this.numberCounter = `${res.features.length}/${this.data_3}`
        this.isLoading = false;
      })
    },
    // 查询供热范围
    doSearchHeatArea(e, row) {
      if (!e) {
        // 说明是点击的顶层供热范围
        this.$MITT_BUS.emit('reset-hushu-area', {
          dataType: 'all',
          type: 'heat-fanwei'
        })
      }
      const HRZBM = row.ZJBM;
      let attributeFilter = ''
      if (HRZBM) {
        attributeFilter = 'HRZBM=' + '\'' + HRZBM + '\''
      } else {
        attributeFilter = 'SMID > 0'
      }
      this.listData = [];
      this.isLoading = true;
      Api.getDataOfGRFW({
        ids: [],
        // 区域名称 换热站名称 换热站编码
        fields: ['SMID', 'QYMC', 'HRZMC', 'HRZBM'],
        attributeFilter: attributeFilter
      }).then(res => {
        if (!res.features || !res.features.length) { this.isLoading = false; return }
        this.activeIndex = 3;
        res.features.forEach(v => {
          const c = turf.center(turf.polygon(v.geometry.coordinates[0]))
          const center = c.geometry.coordinates
          v.properties['CENTER'] = center;
          this.listData.push(v.properties)
        })

        if (e) {
          this.$MITT_BUS.emit('reset-hushu-area', {
            dataType: 'part',
            type: 'heat-fanwei',
            // 数据
            data: res.features.map(v => { return v.properties.HRZBM })
          })
        }

        this.$MITT_BUS.emit('rerender-highlight-layer', {
          data: res,
          type: 'heat-fanwei'
        })
        this.numberCounter = `${res.features.length}/${this.data_4}`
        this.isLoading = false;
      })
    },
    // 单行的定位
    locateHere(row, zoom, type) {
      if (!row.CENTER) { return }
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      mapIns && mapIns.getView().animate({
        zoom: zoom || 16,
        center: row.CENTER
      })
      this.$MITT_BUS.emit('recive-tabledata', {
        type: type,
        data: row.SMID
      })
    },
    locateHere_(row, zoom, type) {
      this.$MITT_BUS.emit('recive-tabledata', {
        type: type,
        data: row.DWMC
      })
    },
    // 重置
    doReset() {
      this.doSearchEnterprise([])
      // this.$MITT_BUS.emit('rerender-highlight-layer', {
      //   data: null,
      //   type: 'enterprise'
      // })
      // this.$MITT_BUS.emit('reset-hushu-area', {
      //   dataType: 'all',
      //   type: 'enterprise'
      // })
    },
    doView() {
      this.$MITT_BUS.emit('know-ledge-visi', {
        visi: true
      })
    }
  }
});
</script>
<template>
  <div class="section-one">
    <GlobalCard style="position: relative" :mainTitle="'供热数据总览'" :showReset="true" @reset="doReset" @view="doView">
      <template #body>
        <!-- 代码 -->
        <div id="Gongreshuju">
          <div class="inner">
            <div class="item">
              <!-- 企业 -->
              <div class="circle" :class="[
                activeIndex === 0 ? 'active' : ''
              ]" @click="doSearchEnterprise({ ids: [], fromEvent: true, checkAll: true })">
                <div class="name font-HONGMENG-SC">
                  <span class="temp">
                    <img class="icon" :src="iconCompany" />
                    <span>供热企业</span>
                  </span>
                  <div class="font-YouSheBiaoTiHei">
                    <count-to :startVal="0" :endVal="data_1" :duration="3000" :autoplay="true" />
                    <span v-if="data_1" class="small-size">个</span>
                  </div>
                </div>
              </div>
              <!-- 热源 -->
              <div class="circle" :class="[
                activeIndex === 1 ? 'active' : ''
              ]" @click="doSearchHeatSource(null, { DWMC: '' }, true)">
                <div class="name font-HONGMENG-SC">
                  <span class="temp">
                    <img class="icon" :src="iconReyuyan" />
                    <span>热源</span>
                  </span>
                  <div class="font-YouSheBiaoTiHei">
                    <count-to :startVal="0" :endVal="data_2" :duration="3000" :autoplay="true" />
                    <span v-if="data_2" class="small-size">个</span>
                  </div>
                </div>
              </div>
              <!-- 换热站 -->
              <div class="circle" :class="[
                activeIndex === 2 ? 'active' : ''
              ]" @click="doSearchHeatChanger(null, { ZJBM: '' }, true)">
                <div class="name font-HONGMENG-SC">
                  <span class="temp">
                    <img class="icon" :src="iconHuanrezhan" />
                    <span>换热站</span>
                  </span>
                  <div class="font-YouSheBiaoTiHei">
                    <count-to :startVal="0" :endVal="data_3" :duration="3000" :autoplay="true" />
                    <span v-if="data_3" class="small-size">个</span>
                  </div>
                </div>
              </div>
              <!-- 供热范围 -->
              <div class="circle" :class="[
                activeIndex === 3 ? 'active' : ''
              ]" @click="doSearchHeatArea(null, { ZJBM: '' }, true)">
                <div class="name font-HONGMENG-SC">
                  <span class="temp">
                    <img class="icon" :src="iconGongrefanwei" />
                    <span>供热范围</span>
                  </span>
                  <div class="font-YouSheBiaoTiHei">
                    <count-to :startVal="0" :endVal="data_4" :duration="3000" :autoplay="true" />
                    <span v-if="data_4" class="small-size">个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 公司 -->
          <div class="main-table" v-if="activeIndex === 0">
            <el-table :empty-text="'暂无数据'" class="self-table" :data="listData" show-overflow-tooltip :tooltip-options="{
              placement: 'right'
            }" style="width: 100%; padding-right: 10px" height="23rem" header-row-class-name="main-table-header">
              <el-table-column type="index" label="序号" width="50" align='center' />
              <el-table-column prop="DWMC" label="企业名称" align='left' width="200">
                <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui" @click="locateHere_(row, 16, 'company')">
                    {{ row.DWMC }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align='center'>
                <template #default="{ row }">
                  <el-button link :type="Number(row.COUNT) ? 'primary' : 'info'" size="small" @click="(e) => {
                    doSearchHeatSource(e, row)
                  }">
                    <span class="font-AlibabaPuhui">
                      <span>(</span>
                      <span>{{ row.COUNT }}</span>
                      <span>)</span>
                      查看热源站
                    </span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 热源站 -->
          <div class="main-table" v-if="activeIndex === 1">
            <el-table :empty-text="'暂无数据'" class="self-table" :data="listData" show-overflow-tooltip :tooltip-options="{
              placement: 'right'
            }" style="width: 100%; padding-right: 10px" height="23rem" header-row-class-name="main-table-header">
              <el-table-column type="index" label="序号" width="50" align='center' />
              <el-table-column prop="ZDMC" label="热源名称" align='left' width="100">
                <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui" @click="locateHere(row, 16, 'reyuanzhan')">
                    {{ row.ZDMC }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="DWMC" label="所属企业" align='left' width="100">
                <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="(e) => {
                    doSearchEnterprise({
                      ids: [],
                      DWMC: row.DWMC
                    })
                  }">
                    <span class="font-AlibabaPuhui">{{ row.DWMC }}</span>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align='center'>
                <template #default="{ row }">
                  <el-button link :type="Number(row.HRZ_COUNT) ? 'primary' : 'info'" size="small" @click="(e) => {
                    doSearchHeatChanger(e, row)
                  }">
                    <span class="font-AlibabaPuhui">
                      <span>(</span>
                      <span>{{ row.HRZ_COUNT }}</span>
                      <span>)</span>
                      查看换热站
                    </span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 换热站 -->
          <div class="main-table" v-if="activeIndex === 2">
            <el-table :empty-text="'暂无数据'" class="self-table" :data="listData" show-overflow-tooltip :tooltip-options="{
              placement: 'right'
            }" style="width: 100%; padding-right: 10px" height="23rem" header-row-class-name="main-table-header"
              v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.2)">
              <el-table-column type="index" label="序号" width="50" align='center' />
              <el-table-column prop="HRZMC" label="换热站名称" align='left'>
                <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui" @click="locateHere(row, 17, 'huanrezhan')">
                    {{ row.HRZMC }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="所属热源站" align='center'>
                <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="(e) => {
                    doSearchHeatSource(e, row)
                  }">
                    <!--                    所属热源站-->
                    <span class="font-AlibabaPuhui">{{ row.ZDMC }}</span>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align='center'>
                <template #default="{ row }">
                  <el-button link :type="Number(row.XQ_COUNT) ? 'primary' : 'info'" size="small" @click="(e) => {
                    doSearchHeatArea(e, row)
                  }">
                    <span class="font-AlibabaPuhui">
                      <span>(</span>
                      <span>{{ row.XQ_COUNT }}</span>
                      <span>)</span>
                      查看供热范围
                    </span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 供热范围 -->
          <div class="main-table" v-if="activeIndex === 3">
            <el-table :empty-text="'暂无数据'" class="self-table" :data="listData" show-overflow-tooltip :tooltip-options="{
              placement: 'right'
            }" style="width: 100%; padding-right: 10px" height="23rem" header-row-class-name="main-table-header"
              v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.2)">
              <el-table-column type="index" label="序号" width="50" align='center' />
              <el-table-column prop="QYMC" label="小区名称" align='left'>
                <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui" @click="locateHere(row, 17, 'gongrefanwei')">
                    {{ row.QYMC }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="HRZMC" label="所属换热站" align='center'>
                <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="(e) => {
                    // 查找换热站
                    doSearchHeatChanger(e, row)
                  }">
                    <span class="font-AlibabaPuhui">{{ row.HRZMC }}</span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 计数器 -->
          <div class="number-counter">
            {{ numberCounter }}
          </div>
        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-one {
  position: fixed;
  top: 11rem;
  left: 2rem;
}

.number-counter {
  text-align: right;
  font-size: 1.5rem;
  font-weight: bolder;
  line-height: 3rem;
  font-family: "ALIBABAPUHUI-REGU" !important;
}
.small-size {
  font-size: 1.5rem;
}

#Gongreshuju {
  position: relative;
  height: 53rem;

  &>.inner {
    &>.item {
      position: relative;
      height: 27rem;

      &>.circle {
        position: absolute;
        bottom: 1rem;
        border-radius: 50%;
        border: .2rem solid transparent;
        transition: all .3s;
        transform: translateX(-50%);
        left: 50%;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        overflow: hidden;

        &:hover {
          border: .2rem solid #aaa;
        }

        &.active {
          border: .2rem solid #fff;
          box-shadow: 0 0 .2rem 0 #fff;
          color: gold;
        }

        &.active,
        &:hover {
          transform: translateX(-50%);
          background-color: #003f80 !important;
        }

        &:nth-child(1) {
          width: 25rem;
          height: 25rem;
          background-color: rgb(10, 71, 129);

          &>.name {
            transform: scale(1) translateY(.25rem);
          }
        }

        &:nth-child(2) {
          width: 20rem;
          height: 20rem;
          background-color: rgba(0, 92, 146, 1);

          &>.name {
            transform: scale(.95) translateY(.5rem);
          }
        }

        &:nth-child(3) {
          width: 15rem;
          height: 15rem;
          background-color: rgba(0, 120, 190, 1);

          &>.name {
            transform: scale(.9) translateY(1rem);
          }
        }

        &:nth-child(4) {
          width: 10rem;
          height: 10rem;
          background-color: rgba(0, 160, 255, 1);

          &>.name {
            transform: scale(.85) translateY(4rem);
          }
        }

        &>.name {
          display: flex;
          align-items: center;
          flex-direction: column;
          pointer-events: none;
          text-shadow: -1px -1px #000;

          &>.temp {
            display: inline-flex;
            align-items: center;

            &>.icon {
              width: 2rem;
              height: 2rem;
            }

            &>span {
              padding-left: .5rem;
              font-family: "alimamashuheiti" !important;
              font-size: 1.5rem;
            }
          }
        }
      }
    }

  }
}
</style>